-98<!-- 售后详情 -->
<template>
	<view>
		<view class="content_box">
			<!-- 步骤条 -->
			<view class="steps-box"><u-steps :current="stepsCurrent" :list="steps" activeColor="#39b54a" mode="number"
					icon="checkmark"></u-steps></view>

			<!-- 服务状态 -->
			<!-- 	<view class="status-box u-flex u-row-between" @tap="jump('/pages/order/after-sale/log', { aftersaleId: aftersaleDetail.id })">
				<view class="">
					<view class="status-text">{{ setstatue(aftersaleDetail.status) }}</view>
					<view class="status-time">{{ aftersaleDetail.lastModifiedDate }}</view>
				</view>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view> -->

			<!-- 退款金额 -->
			<view class="aftersale-money u-flex u-row-between" v-if="aftersaleDetail.actualType=='AFTERSALES_RETURNS'">
				<view class="aftersale-money--title">退款金额</view>
				<view class="aftersale-money--num" v-if="Number(aftersaleDetail.amount.toFixed(2))">
					￥{{ aftersaleDetail.amount.toFixed(2) }}</view>
				<view class="aftersale-money--num" v-else>未退款</view>
			</view>
			<!-- 服务商品 -->
			<view class="order-shop" v-for="(orderItem, index) in aftersaleDetail.orderItems" :key="index">
				<ljshop-mini-card :title="orderItem.name" :image="orderItem.thumbnail">
					<template #describe>
						<view class="order-sku u-ellipsis-1">
							<text class="order-num">数量:{{ orderItem.quantity || 0 }};</text>
							{{ aftersaleDetail.goods_sku_text ? aftersaleDetail.goods_sku_text : '' }}
						</view>
					</template>
					<template #cardBottom>
						<view class="card-price-box u-flex">
							<text class="order-price">￥{{ orderItem.price.toFixed(2) || 0 }}</text>
							<button class="u-reset-button status-btn" v-if="aftersaleDetail.status">
								{{ setstatue(aftersaleDetail.status) }}
							</button>
						</view>
					</template>
				</ljshop-mini-card>
			</view>

			<!-- 服务内容 -->
			<view class="aftersale-content">
				<view class="aftersale-item u-flex jsc">
					<view class="item-title">服务单号：</view>
					<view class="item-content u-flex">
						{{ aftersaleDetail.orderSn }}
						<button class="u-reset-button copy-btn" @tap="onCopy(aftersaleDetail.orderSn)"
							style="padding:0 0 0 20rpx;color: #ed712d;">复制</button>
					</view>
				</view>
				<view class="aftersale-item u-flex jsc">
					<view class="item-title">退款路径：</view>
					<view class="item-content">{{aftersaleDetail.order?aftersaleDetail.order.paymentMethodName:""}}</view>
				</view>
				<view class="aftersale-item u-flex jsc">
					<view class="item-title">申请时间：</view>
					<view class="item-content">{{ aftersaleDetail.createdDate }}</view>
				</view>
				<view class="aftersale-item u-flex jsc">
					<view class="item-title">售后类型：</view>
					<view class="item-content">{{settype(aftersaleDetail.actualType) }}</view>
				</view>
				<!-- <view class="aftersale-item u-flex" v-if="aftersaleLog && aftersaleLog.length">
					<view class="item-title">申请原因：</view>
					<view class="item-content">{{ aftersaleDetail.reason }}</view>
				</view> -->
				<view class="aftersale-item u-flex jsc">
					<view class="item-title">相关描述：</view>
					<view class="item-content ">{{ aftersaleDetail.reason }}</view>
				</view>
				
				<view class="aftersale-item u-flex jsc" v-if="aftersaleDetail.trackingNo" style="margin-top: 10rpx;">
					<view class="u-flex">
					<view class="item-title">快递号：</view>
					<view class="item-content">{{aftersaleDetail.trackingNo}}</view>
					</view>
					<view class="item-content"  @tap="wuliu()">{{!showwl?"查看":"关闭"}}</view>
				</view>
			</view>
			<view class="refund-item u-m-b-20" v-if="showKd">
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="快递名称:"
					prop="phone">
					<view class="uni-list-cell">

						<view class="uni-list-cell-db">
							<picker @change="showkdchange" :value="index" :range="kdlist" range-key="name">
								<view class="uni-input">{{kd?kd:"请选择快递名称"}}</view>
							</picker>
						</view>
					</view>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="快递单号:"
					prop="phone">
					<u-input placeholder="请输入快递单号:" v-model="model.code"></u-input>
				</u-form-item>
			</view>

		</view>
		
		<view class="oilStation-bottom" v-if="showwl" >
			<text class="u-iconfont uicon-close-circle-fill close-icon" @tap="wuliu()"></text>
			<view class="u-p-y-30" style="margin-bottom: 100rpx;">
				<view v-if="exrpessLog.length" class="express-item u-flex u-col-center"
					v-for="(log, index) in exrpessLog" :key="log.id">
					<view class="item-left">
						<view class="day">{{ log.time.split(' ')[0]}}</view>
						<view class="time">{{ log.time.split(' ')[1] }}</view>
					</view>
					<view class="item-right">
						<image class="express-tag"
							:src="$IMG_URL + `/imgs/order/express${index == 0 ? log.status + '' + log.status : log.status}.png`"
							mode="aspectFill"></image>
						<view class="express-title">{{ log.status }}</view>
						<view class="express-detail">{{ log.context }}</view>
					</view>
				</view>
				 
			</view>
		</view>

		<view class="foot_box">
			<block>
				<button @tap.stop="onCancel(aftersaleDetail.id)" class="u-reset-button  contcat-btn btn">取消</button>
			</block>
			<button v-if="!showKd" class="u-reset-button contcat-btn btn" @tap="onService"
				style="background-image: linear-gradient(to right,#f09336,#ec5f29); color: #fff;">联系客服</button>
			<button v-if="showKd" class="u-reset-button contcat-btn btn" style="background-image: linear-gradient(to right,#f09336,#ec5f29); color: #fff;" @tap="onsubmit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},
				stepsCurrent: -1,
				steps: [],

				model: {
					code: '',
				},
				showKd: false,
				aftersaleDetail: {}, //售后详情
				aftersaleLog: [],
				index: 0, //售后记录
				kd: "",
				kdid: "",
				kdlist: [],
				isBack: false,
				exrpessLog:[],
				showwl:false
			};
		},
		computed: {},
		onLoad() {
			 
			this.getAftersaleDetail();
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			settype(status) {
				let sta = ""
				if (status == 'AFTERSALES_REPAIR') {
					sta = "申请维修"
				}
				if (status == 'AFTERSALES_REPLACEMENT') {
					sta = "申请换货"
				}
				if (status == 'AFTERSALES_RETURNS') {
					sta = "申请退货"
				}
				return sta
			},
			showkdchange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value
				let that = this
				that.kd = that.kdlist[this.index].name;
				that.kdid = that.kdlist[this.index].id;

			},
			setstatue(status) {
				let sta = ""
				if (status == 'PENDING') {
					sta = "等待审核"
				}
				if (status == 'APPROVED') {
					if (this.isBack) sta = "已退款"
					if (!this.isBack) sta = "待退款"
				}
				if (status == 'FAILED') {
					sta = "审核失败"
				}
				if (status == 'COMPLETED') {
					sta = "已完成"
				}
				if (status == 'CANCELED') {
					sta = "已取消申请"
				}

				return sta

			},
			onsubmit() {
				let that = this;
				that.$http(
					'order.transit_tabs', {
						id: that.$Route.query.aftersaleId,
						code: that.model.code,
						kdid: that.kdid
					},
					'保存中...'
				).then(res => {
					uni.hideLoading()
					uni.navigateBack()
				});

			},
			// 跳转客服
			onService(Id, logo, name) {
				if (uni.getStorageSync("UId")) {
					// #ifdef APP-PLUS
					let that = this;
					this.$Router.push({
						path: '/pages/kefu/liaotian',
						//path: '/pages/kefu/index',
						query: {
							id: Id,
							logo: logo,
							name: name
						}
					})
					// #endif
					// #ifdef MP-WEIXIN ||H5
					let that = this;
					this.$Router.push({
						path: '/pages/kefu/minikefu',
						//path: '/pages/kefu/index',
						query: {
							id: Id,
							logo: logo,
							name: name
						}
					})
					// #endif

				} else {
					// #ifdef MP-WEIXIN
					uni.showToast({
						title: '请先到个人中心登录',
						icon: 'none'
					});
					// #endif

					// #ifdef APP-PLUS
					uni.navigateTo({
						url: "/subunimodules/uni-id-pages/pages/login/login-withoutpwd?type=" + this.loginType
					})
					// #endif
				}
			},
			// 复制
			onCopy(code) {
				let that = this;
				uni.setClipboardData({
					data: code,
					success: function(data) {
						that.$u.toast('已复制到剪切板');
					}
				});
			},

			// 设置步骤条
			setSteps(sta) {
				
				if (sta == "PENDING") {
					this.stepsCurrent = 0;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '等待商家审核'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "APPROVED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家已审核'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "COMPLETED") {
					this.stepsCurrent = 2;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家已审核'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "FAILED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家拒绝申请'
						}
					]
				}
				if (sta == "CANCELED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '已取消申请'
						}
					]
				}
			},
			setSteps2(sta) {

			
				if (sta == "PENDING") {
					this.stepsCurrent = 0;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '等待商家审核'
						},
						{
							name: '已寄回商品'
						},
						
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "APPROVED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家已审核'
						},
						{
							name: '已寄回商品'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "APPROVED"&&this.aftersaleDetail.trackingNo!="") {
					this.stepsCurrent = 2;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家已审核'
						},
						{
							name: '已寄回商品'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "COMPLETED") {
					this.stepsCurrent = 3;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家已审核'
						},
						{
							name: '已寄回商品'
						},
						{
							name: '完成退款'
						},
					]
				}
				if (sta == "FAILED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '商家拒绝申请'
						}
					]
				}
				if (sta == "CANCELED") {
					this.stepsCurrent = 1;
					this.steps = [{
							name: '提交申请'
						},
						{
							name: '已取消申请'
						}
					]
				}
			},


			// 服务单详情
			getAftersaleDetail() {
				let that = this;
				that.$http('order.aftersaleDetail', {
					id: that.$Route.query.aftersaleId
				}).then(res => {
					
					that.aftersaleDetail = res.aftersales;
					if (res.aftersales.order.status == "PENDING_SHIPMENT" || res.aftersales.order.status ==
						"RETURN") { //为发货
						that.setSteps(res.aftersales.status);
					} else { //已发货
						that.setSteps2(res.aftersales.status);
					}
					that.kdlist = res.deliveryCorps;

					that.isBack = res.isRefund

					that.aftersaleDetail.createdDate = that.$u.timeFormat(res.aftersales.createdDate,
						'yyyy-mm-dd hh:MM');
					that.aftersaleDetail.lastModifiedDate = that.$u.timeFormat(res.aftersales.lastModifiedDate,
						'yyyy-mm-dd hh:MM');
					if (that.aftersaleDetail.order.status == 'RECEIVED' && res.aftersales.status=="APPROVED") {
						that.showKd = true;
					}
					if (that.aftersaleDetail.trackingNo!="") {
						that.showKd = false;
					}
				});
			},
			//取消
			onCancel(aftersaleId) {
				let that = this;
				that.$http(
					'order.aftersalecancel', {
						id: aftersaleId
					},
					'取消中...'
				).then(res => {
					that.$Router.back();
				});
			},
			// 删除
			onDelete(aftersaleId) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteAftersaleOrder', {
								id: aftersaleId
							}).then(res => {
								if (res.code === 1) {
									that.$Router.back();
								}
							});
						}
					}
				});
			},
			wuliu(){
				let that = this;
				if(that.showwl){
					that.showwl = !that.showwl
					return
				}
				that.$http('order.aftersaletransitStep', {
					deliveryCorpCode: that.aftersaleDetail.deliveryCorpCode,
					trackingNo:that.aftersaleDetail.trackingNo
				}).then(res => {
				
					if (res.transitSteps) {
						 that.exrpessLog = res.transitSteps
						 that.showwl =true
					} else {
						this.$u.toast('暂无包裹~');
					}
				
				});
			}
		}
	};
</script>

<style lang="scss">
	// 步骤条
	.close-icon {
		font-size: 48rpx;
		color: #e0e0e0;
		position: relative;
		width: 50rpx;
		top: 20rpx;
		left: 600rpx;
	}
	.steps-box {
		height: 190rpx;
		padding: 60rpx 0 0;
		background: #fff;
		margin-top: 10rpx;
	}

	// 服务状态
	.status-box {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 20rpx;
		margin-top: -20rpx;

		.status-text {
			font-size: 28rpx;

			font-weight: 500;
			color: red;
			margin-bottom: 20rpx;
		}

		.status-time {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
	}

	// 退款金额
	.aftersale-money {
		background-color: #fff;
		height: 70rpx;
		padding: 0 20rpx;
		margin-top: 10rpx;

		.aftersale-money--title {
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.aftersale-money--num {
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(225, 33, 43, 1);
		}
	}

	// order-shop
	.order-shop {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		margin-top: 10rpx;

		.order-sku {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			width: 450rpx;
			margin-bottom: 20rpx;

			.order-num {
				margin-right: 10rpx;
			}
		}

		.card-price-box {
			.status-btn {
				height: 32rpx;
				border: 1rpx solid rgba(207, 169, 114, 1);
				border-radius: 15rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0 10rpx;
				margin-left: 20rpx;
				background: rgba(233, 183, 102, 0.16);
			}

			.order-price {
				font-size: 26rpx;

				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
		}
	}

	// 服务内容
	.aftersale-content {
		background-color: #fff;
		padding: 20rpx;

		.aftersale-item {
			height: 60rpx;

			.copy-btn {
				background: none;
				color: #b38436;
				font-size: 26rpx;
				padding: 0 20rpx;
			}

			.item-tilte {
				color: #333;
				font-size: 28rpx;
			}

			.item-content {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}

	// 底部功能
	.foot_box {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn {
			width: 160rpx;
			line-height: 60rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 30rpx;
			padding: 0;
			margin-right: 20rpx;
			font-size: 26rpx;

			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.delete-btn {
			background: #ffeeee;
			color: #e50808;
		}
	}

	.refund-item {
		background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 14rpx;

		.item-title {
			font-size: 30rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 20rpx;
		}

		// 留言
		.describe-box {
			width: 690rpx;
			background: rgba(249, 250, 251, 1);
			border-radius: 20rpx;

			.describe-content {
				width: 660rpx;
				padding: 30rpx;
				height: 200rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}
		}

		.input--pl {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(177, 179, 199, 1);
		}

		// 联系方式
		.input-box {
			height: 84rpx;
			background: rgba(249, 250, 251, 1);
			border-radius: 20rpx;

			.item-input {
				padding: 0 30rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
			}
		}
	}

	.goods-box {
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.order-sku {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			width: 450rpx;
			margin-bottom: 20rpx;

			.order-num {
				margin-right: 10rpx;
			}
		}

		.card-price-box {
			.status-btn {
				height: 32rpx;
				border: 1rpx solid #f9731e;
				border-radius: 15rpx;
				font-size: 20rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-weight: 400;
				color: #f9731e;
				padding: 0 10rpx;
				margin-left: 20rpx;
				background: rgba(233, 183, 102, 0.16);
			}

			.order-price {
				font-size: 26rpx;

				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
		}
	}

	.goods-item {
		height: 95rpx;
		background: #fff;
		padding: 0 25rpx;
		margin-bottom: 20rpx;

		// 售后原因
		.refund-cause {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(177, 179, 199, 1);
		}

		&:nth-of-type(2n) {
			margin-bottom: 0;
			border-top: 0;
		}

		.item-title {
			font-size: 28rpx;
		}

		.price {
			font-size: 28rpx;
			color: #a8700d;
		}
	}

	.upload-img {
		padding: 25rpx;

		.upload-title {
			font-size: 28rpx;
		}
	}

	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.choose-img,
		.preview-box {
			width: 110rpx;
			height: 110rpx;
			background: rgba(249, 250, 251, 1);
			border: 1rpx solid rgba(223, 223, 223, 1);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			&:nth-child(5n) {
				margin-right: 0;
			}

			.preview-img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.foot-wrap {
		height: 100rpx;
		width: 100%;
	}

	.foot_box {
		height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #f5f5f5;

		.sub-btn {
			width: 340rpx;
			line-height: 74rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 38rpx;
			color: rgba(#fff, 0.9);
			font-size: 28rpx;
		}

		.contcat-btn {
			width: 340rpx;
			line-height: 74rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 38rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.modal-box {
		width: 750rpx;
		height: 680rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;

		.modal-head {
			height: 100rpx;
			font-size: 30rpx;
		}

		.modal-content {
			font-size: 28rpx;

			.sel-item {
				height: 100rpx;
				width: 100%;
				padding: 0 20rpx;
				border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);

				.sel-radio {
					transform: scale(0.7);
				}
			}
		}

		.modal-foot {
			.close-btn {
				width: 710rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				border: 1rpx solid rgba(238, 238, 238, 1);
				border-radius: 40rpx;
				color: rgba(#fff, 0.9);
			}
		}
	}

	.jsc {
		justify-content: space-between;
	}
	.oilStation-bottom {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		background: #fff;
		width: 710rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 1rpx 18rpx 0 rgba(184, 184, 184, 0.55);
		padding: 0 30rpx;
	}
	
	// 物流步骤条
	.no-log {
		width: 100%;
		height: 100rpx;
		color: #999;
	}
	
	.express-item {
		align-items: flex-start;
		.item-left {
			.day {
				font-size: 26rpx;
				white-space: nowrap;
			}
			.time {
				font-size: 20rpx;
				white-space: nowrap;
			}
		}
	
		.item-right {
			position: relative;
			padding-left: 54rpx;
			margin-left: 54rpx;
			border-left: 1rpx solid #e7e7e7;
			padding-bottom: 40rpx;
	
			.express-tag {
				width: 54rpx;
				height: 54rpx;
				position: absolute;
				left: -27rpx;
				top: 0;
			}
	
			.express-title {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 10rpx;
			}
	
			.express-detail {
				width: 400rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
</style>